<template>
	<div class="dljm">
		<el-form ref="form" :model="formDate" :rules="rules" hide-required-asterisk label-width="80px" class="bd">
			<h2>十方智育 - 后台登录</h2>
			<el-form-item label="账号" prop="username">
				<el-input v-model="formDate.username" placeholder="请输入账号" prefix-icon='el-icon-user'></el-input>
			</el-form-item>
			<el-form-item label="密码" prop="password">
				<el-input type="password" v-model="formDate.password" placeholder="请输入密码"
					prefix-icon='el-icon-lock'></el-input>
			</el-form-item>
			<el-button type="primary" @click="onSubmit">登录</el-button>
			<el-button @click="qcsj">取消</el-button>

		</el-form>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				formDate: {
					username: '李振兴',
					password: '123456',
				},

				rules: {
					username: [{
							required: true,
							message: '请输入账号',
							trigger: 'blur'
						},
						{
							min: 2,
							max: 20,
							message: '长度在 2 到 20 个字符',
							trigger: 'blur'
						}
					],
					password: [{
							required: true,
							message: '请输入密码',
							trigger: 'blur'
						},
						{
							min: 2,

							message: '长度最少2个字符',
							trigger: 'blur'
						}
					]
				}
			}
		},
		methods: {
			qcsj() {
				this.$refs['form'].resetFields();
			},
			onSubmit() {
				this.$refs['form'].validate((valid) => {
					if (valid) {
						this.$http.post('Systemuser/login', this.formDate)
							.then(response => {
								if (response.data.status === 200) {
									this.$message.success('登录成功');
									sessionStorage.setItem('username', response.data.data.username)
									sessionStorage.setItem('nickName', response.data.data.nickName)
									sessionStorage.setItem('userid', response.data.data.id)
									sessionStorage.setItem('role', response.data.data.role)
									this.$router.push('/main');
								} else {
									this.$message.error('登录失败');
								}
							})
							.catch(error => {
								console.error('登录时发生错误:', error);
								this.$message.error('服务器异常');
							});
					} else {
						alert('非法登录');
						return false;
					}
				});
			},
		}
	}
</script>

<style scoped="scoped">
	.dljm {
		height: 100vh;
		background-image: url('../assets/Login_back.jpg');
		background-repeat: no-repeat;
		background-position: center;
		overflow: hidden;
		background-size: 100% 100%;
	}

	.bd {
		background-color: pink;
		margin: 150px auto;
		padding: 50px 70px 50px 30px;
		text-align: center;
		width: 400px;
		/* height: 350px; */
		border-radius: 4%;
	}

	p {
		font-size: 13px;
	}
</style>